<template>
  <div>
    <article class="innerPage bookList">
      <header class="breadcrumb">
        <x-breadcrumb :path="$route.path" :title="$route.meta.breadcrumb" :startIndex="$route.meta.startIndex">
        </x-breadcrumb>
      </header>
      <section class="graphical">
        <SearchCondition :formItemList="formItemList" :emitSearch="emitSearch" :resetSearch="resetSearch" @search="search" ref="mychild" />
      </section>
      <div class="decorate"></div>
      <section class="graphical2">
        <div class="btn_add">
          <el-button icon="el-icon-circle-plus-outline" class="btn-green icon-fontSize" @click="addBtn">添加通知</el-button>
        </div>
        <div>
          <el-table :data="tableData" class="tableStyle" :header-cell-style="$headerCellStyle" :border="$isborder" border size="mini" ref="elTable" stripe>
            <el-table-column prop="key" label="序号" label-class-name="indexColumn" :width="$widtha" align="center" fixed="left" />
            <el-table-column prop="username" label="管理员名称" align="left" :min-width="$widths" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="content" label="通知内容" align="left" :min-width="$widthb" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="type_name" label="服务类型" align="left" :min-width="$widtha" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="time" label="时间" align="left" :min-width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="name" label="推送类型" align="left" :min-width="$widths" show-overflow-tooltip>
              <template slot-scope="{ row }">
                {{ nodeList[row.node] }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="account_id"
              label="读者证号"
              align="left"
              :min-width="$widthb"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="wechat_id"
              label="微信"
              align="left"
              :min-width="$widthb"
              show-overflow-tooltip
            >
            </el-table-column> -->
            <el-table-column prop="remark" label="备注" align="left" :min-width="$widthb" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="link" label="链接" align="left" :min-width="$widthb" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="推送状态" align="left" :min-width="$widths" show-overflow-tooltip>
              <template slot-scope="{ row }">
                <span :style="row.is_send == 2 ? 'color:red' : 'color:#00a9b0'">{{ row.is_send == 2 ? "未推送" : "已推送" }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="添加时间" align="left" :width="$widthb" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作" :width="200" fixed="right" :header-align="$heaerOpt">
              <template slot-scope="{ row }">
                <div class="btnFrom-box">
                  <div class="details-box" @click="infoFun(row.id)">详情</div>
                  <div v-show="row.is_send == 2" class="details-box" @click="ImmediateBtn(row.id)" v-alive>
                    <span></span> 立即发送
                  </div>
                  <div class="details-box" @click="editBtn(row)" v-show="row.is_send == 2" v-alive>
                    <span></span> 修改
                  </div>
                  <div class="delete-box" @click="deleBtn(row.id)" v-show="row.is_send == 2" v-alive>
                    <span></span> 删除
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
      <footer class="pagination">
        <div>
          <el-pagination background prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper" :total="listTotal" :page-size="10" @current-change="handleCurrentChange" :current-page.sync="currentPage1">
          </el-pagination>
          
        </div>
        <p>
          共
          <span>{{ listTotal || 0 }}</span>
          数据
        </p>
      </footer>
    </article>
    <!-- 删除 -->
    <DeletetkPage ref="isdel" @deletesuccess="getmanDel"></DeletetkPage>
    <!-- 立即推送弹框 -->
    <x-AgreeDialog ref="audit" @showAudit="getImmediate"></x-AgreeDialog>

    <el-dialog :visible.sync="dialogVisible" width="1000px">
      <template slot="title">
        <div class="tishi">
          <span>详情</span>
        </div>
      </template>
      <div class="xContent">
        <ul class="preview">
          <li class="preview-li">
            <div class="li-label">推送方式</div>
            <div class="" style="display: flex; flex-direction: column">
              <!-- 0不要 分别对应node的123 -->
              <span>{{['','批量推送','微信限制','读者证号限制'][particularsdata.node]}}</span>
            </div>
          </li>

          <li class="preview-li" v-if="particularsdata.node==2">
            <div class="li-label">推送对象</div>
            <div class="list">
              <div class="item" v-for="item in particularsdata.wechat_info">
                <img class="img" :src="item.head_img" alt="">
                <div class="name">{{item.nickname}}</div>
              </div>
            </div>
          </li>
          <li class="preview-li" v-if="particularsdata.node==3">
            <div class="li-label">推送对象</div>
            <div class="" style="display: flex; flex-direction: column">
              <span v-for="(item, i) in particularsdata.account_info" style="margin-bottom: 6px">{{ `${item.username}:${item.account}` }}</span>
            </div>
          </li>
          <li class="preview-li">
            <div class="li-label">备注</div>
            <div class="">
              {{ particularsdata.remark }}
            </div>
          </li>
          <li class="preview-li">
            <div class="li-label">服务类型</div>
            <div class="">
              {{ particularsdata.type_name }}
            </div>
          </li>
          <li class="preview-li">
            <div class="li-label">时间</div>
            <div class="">
              {{ particularsdata.time }}
            </div>
          </li>
          <li class="preview-li">
            <div class="li-label">添加时间</div>
            <div class="">
              {{ particularsdata.start_time }}
            </div>
          </li>
          <li class="preview-li">
            <div class="li-label">通知内容</div>
            <div class="">
              {{ particularsdata.content }}
            </div>
          </li>
          <li class="preview-li">
            <div class="li-label">链接</div>
            <div class="">
              {{ particularsdata.link }}
            </div>
          </li>
          <li class="preview-li">
            <div class="li-label">推送状态</div>
            <div class="">
              {{ particularsdata.is_send == 2 ? "未推送" : "已推送" }}
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      formItemList: [
        {
          label: "推送类型",
          type: "select",
          selectOptions: [
            {
              value: 0,
              name: "全部",
            },
            {
              value: 1,
              name: "批量推送",
            },
            {
              value: 2,
              name: "微信限制",
            },
            {
              value: 3,
              name: "读者证号限制",
            },
          ],
          param: "node",
          defaultSelect: "", // 下拉框默认选中项
        },
        {
          label: "推送时间",
          type: "dateRange",
          param1: "start_time",
          param2: "end_time",
          placeholder: "推送开始时间",
        },

      ],
      emitSearch: false,
      resetSearch: true,
      tableData: [],
      page: 1,
      listTotal: 0,
      currentPage1: 1,
      searchList: {
        node: "",
        end_time: "",
        start_time: "",
      },
      nodeList: {
        1: "批量推送",
        2: "微信限制",
        3: "读者证号限制",
      },

      dialogVisible: false,
      particularsdata: {
        account_id: "",
        account_info: [{ account: "", username: "" }],
        content: "",
        end_time: "",
        id: 0,
        is_send: 0,
        link: "",
        node: 0,
        remark: "",
        start_time: "",
        time: "",
        type_name: "",
        wechat_id: "",
        wechat_info: "",
      },
    };
  },

  mounted() { },
  activated() {
    if (this.$route.params.action == 'refresh' || this.$isFirstInPage.get()) {
      
      this.getList();
    }
    this.setPageTabs();
  },
  computed: {},
  methods: {
    async infoFun(id) {
      try {
        let res = await this.request({
          url: "/admin/serviceNotice/detail",
          method: "get",
          loading: true,
          data: { id },
        });
        if (res) {
          this.particularsdata = res.content;
          this.dialogVisible = true;
        }
      } catch (err) {
        this.errorHandler(err);
      }
    },

    //获取数据
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/serviceNotice/list",
          method: "get",
          loading: true,
          data: {
            page: this.page,
            limit: 10,
            ...this.searchList,
          },
        });
        if (res) {
          this.tableData = res.content.data;
          this.listTotal = res.content.total;
          this.currentPage1 = res.content.current_page;
        }
      } catch (err) {
        let error = err.message.split("/");
        if (error[0] == 203) {
          this.tableData = [];
          this.listTotal = 0;
        }
        this.errorHandler(err);
      }
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 搜索条件改变时
    search(params) {
      this.searchList.node = params.node;
      this.searchList.end_time = params.end_time;
      this.searchList.start_time = params.start_time;
      this.page = 1;
      this.getList();
    },
    // 添加类型
    addBtn() {
      this.$router.push({
        path: "/SystemSettings/serviceReminder/noticeFrom",
      });
    },
    // 修改类型
    editBtn(row) {
      this.$router.push({
        path: "/SystemSettings/serviceReminder/noticeFrom",
        query: {
          id: row.id,
        },
      });
    },
    // 点击删除
    deleBtn(id) {
      this.$refs.isdel.delshow(id);
    },
    async getmanDel(id) {
      try {
        let res = await this.request({
          url: "/admin/serviceNotice/del",
          method: "post",
          loading: true,
          data: {
            id: id,
          },
        });
        if (res) {
          this.$message.success("删除成功");
          this.getList();
        }
      } catch (err) {
        this.errorHandler(err);
      }
    },
    // 立即发送
    ImmediateBtn(id) {
      this.immediateId = id;
      this.$refs.audit.isshow("是否立即发送此数据?");
    },
    async getImmediate() {
      try {
        let res = await this.request({
          url: "/admin/serviceNotice/send",
          method: "post",
          loading: true,
          data: {
            id: this.immediateId,
          },
        });
        if (res) {
          this.$refs.audit.isshow2();
          this.$message.success(res.msg);
          this.getList();
        }
      } catch (err) {
        this.errorHandler(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
